/**
 * VUEshop
 * ============================================================================
 * * 版权所有 2015-2027 深圳搜豹网络科技有限公司，并保留所有权利。
 * 网站地址: http://www.vueshop.com.cn
 * ----------------------------------------------------------------------------
 * 这不是一个自由软件！您只能在不用于商业目的的前提下对程序代码进行修改和使用 .
 * 不允许对程序代码以任何形式任何目的的再发布。
 * ============================================================================
 * $Author: 沈小白 2020-07-22 $
 */<template> 
	<view class="container">
		<view class="type-navbar">
			<block v-for="(item,index) in navList" :key="index">
				<view class="type-box">
					<view @tap="changeTab" class=" type-navbar-item " :class="[typeActive==item.id?'type-item-on':'']" :data-id="item.id" :data-type="item.type">
						{{item.name}}
					</view>
				</view>
			</block>
			
		</view>
		<!-- 全部订单 -->
		<view class="goods-container" v-if="goodsDateil.length>0||goodsDateil">
			<block v-for="(item,index) in goodsDateil" :key="index">
				<view class="goods-box">
					<view class="goods-title">
						<view class="store-name" v-if="item.store">
							<image class="store-logo" :src="imgUrl+'cart/carnew.png'" role="img"></image>
							{{item.store.store_name}}
						</view>
						<view class="pay-status">{{item.order_status_detail}}</view>
					</view>
					
					<view class="cont-box">
						<block v-for="(item_good,index) in item.order_goods" :key="index">
							<view class="goods-cont">
								<navigator class="img-box" :url="'/pages/user/order_detail/order_detail?order_sn='+item.order_sn" role="navigation">
									<image class="wh100":src="hostUrl+'/mall/goods/thumb_image?goods_id='+ item_good.goods_id+'&width=400&height=400'" role="img"></image>
								</navigator>
								<navigator class="goods-mes" :url="'/pages/user/order_detail/order_detail?order_sn='+item.order_sn" role="navigation">
									<view class="top">
										<view class="left">{{item_good.goods_name}} </view>
										<view class="right">
											<view class="price">￥{{item_good.goods_price}}</view>
											<view class="num">x{{item_good.goods_num}}</view>
										</view>
									</view>
									<view class="bottom"> 规格:{{item_good.spec_key_name==""||item_good.spec_key_name==undefined?'--':item_good.spec_key_name}} </view>
								</navigator>
								<view @tap="checkReturnGoodsStatus" v-if="item.is_able_return&&item_good.is_send==1" class="return-btn" :data-recid="item_good.rec_id" :data-delivery_id="item_good.delivery_id">申请售后</view>
							</view>
						</block>
					</view>
					
					<view class="countbox">
						<text class="all">
							共{{item.goods_num}}件商品
						</text>
						<text class="word">
							实付款：
						</text>
						<text class="money">
							￥{{item.goods_price.toFixed(2)}}
						</text>
					</view>
					<view class="goods-tips">
						<view class="order-total"></view>
						<view class="check-btn">
							<view @tap="jumpToCart4" :hidden="!item.is_able_pay" class="order-btn order-btn-pay" :data-idx="index">立即付款</view>
							<view @tap="cancelOrder" :hidden="!(item.is_able_cancel&&item.is_able_pay==true)" class="cancel-btn" :data-idx="index">取消订单</view>
							<navigator class="cancel-btn"  :hidden="!(item.is_able_cancel&&item.is_able_pay==false)" :url="'/pages/order/refund_order/refund_order?consignee='+item.consignee+'&mobile='+item.mobile+'&orderId='+item.order_id+'&order_sn='+item.order_sn"
							 role="navigation">取消订单</navigator>
							<view @tap="confirmOrder" :hidden="!item.is_able_receive" class="order-btn" :data-id="index">确认收货</view>
							<navigator class="order-btn" :hidden="!item.is_able_comment" url="/pages/user/comment/comment?status=0" role="navigation">评价</navigator>
							<navigator class="order-btn" :hidden="!item.is_able_shipping" :url="'/pages/user/express/express?order_id='+item.order_id" role="navigation">查看物流</navigator>
						</view>
					</view>
				</view>
			</block>
		</view>
		<!-- 无订单 -->
		<view class="goods-container" v-if="!goodsDateil.length>0">
			<view class="no-data">
				<image class="cart-image" :src="imgUrl+'cart/cart-null.png'" role="img"></image>
				<view class="no-data-title">暂无订单列表</view>
				<navigator class="lookat" open-type="switchTab" url="/pages/index/index" role="navigation"> 去逛逛 </navigator>
			</view>
		</view>
	</view>
</template>

<script>
	import common from "@/common/common.js";
	import config from "@/api/config.js";
	import {getOrderPage,putCancelOrder,getTheGoods,getReturnGoods} from "@/api/api.js";
	import {mapState} from 'vuex'
	export default {
		data() {
			return {
				hostUrl:config.host,
				imgUrl:config.imgUrl,
				loginInfo:"",
				navList:[
					{name:"全部订单",id:0,type:""},
					{name:"待付款",id:1,type:"WAITPAY"},
					{name:"待发货",id:2,type:"WAITSEND"},
					{name:"待收货",id:3,type:"WAITRECEIVE"},
					{name:"已完成",id:4,type:"FINISH"},
				],
				typeActive:0,//状态
				goodsDateil:[],//数据
				total:"",//条数
				params:{
					p:1,//大小10条
					prom_type:"",//订单类型 6为拼团订单
					type:"",//默认全部订单
				},
				options:"",
				recid:"",
				delivery_id:"",//发货单号
			};
		},
		computed: {
			...mapState(['hasLogin'])
		},
		onLoad(options){
			// console.log(options)
			this.options=options
			// this.params.prom_type=6;
			
		},
		onShow(){
			if(this.hasLogin){
				this.navList.forEach((i,index)=>{
					if(this.options.type==i.id){
						this.params.type=i.type
						this.typeActive=i.id
						
						
					}
				})
				if(this.options.type){
					this.initData()
				}
				this.getOrderPage(this.params)
			}else{
			
				common.toast("none","请登录",2000)
				
			}
			
		},
		methods:{
			/*初始化*/ 
			initData(){
				this.params.p=1;
				this.goodsDateil.length=0;
			},
			//订单
			getOrderPage(params){
				getOrderPage(params).then(res=>{
					console.log(res)
					if(res){
						this.goodsDateil=this.goodsDateil.concat(res.records);
						this.total=res.total
					}
				})
			},
			/*取消订单*/
			putCancelOrder(params,idx){
				putCancelOrder(params,idx).then(res=>{
					if(res.status==1){
						common.toast("none","取消成功",2000)
						// this.getOrderPage(this.params)
						this.goodsDateil.splice(idx,1)
					}
					console.log(res)
				})
			},
			//切换
			changeTab(e){
				console.log(e)
				let type=e.currentTarget.dataset.type;
				let id=e.currentTarget.dataset.id;
				this.goodsDateil.length=0;
				this.params.p=1;
				this.typeActive=id
				this.params.type=type
				this.getOrderPage(this.params)
			},
			/*取消订单*/
			cancelOrder(e){
				let idx=e.currentTarget.dataset.idx
				let order_sn=this.goodsDateil[idx].order_sn;
				let params={
					order_sn:order_sn
				}
				// console.log(order_sn)
				this.putCancelOrder(params,idx)
				
			},
			/*立即付款*/
			jumpToCart4(e){
				let idx=e.currentTarget.dataset.idx
				let order_sn=this.goodsDateil[idx].order_sn;
				uni.navigateTo({
					url:`/pages/cart/cart4/cart4?order_sn=${order_sn}`
				})
			},
			/*确认收货*/
			confirmOrder(e){
				console.log(e)
				let idx=e.currentTarget.dataset.id
				let order_sn=this.goodsDateil[idx].order_sn;
				// console.log(order_sn)
				let params={
					order_sn:order_sn
				}
				this.getTheGoods(params)
			},
			/*确认收货*/
			getTheGoods(params){
				getTheGoods(params).then(res=>{
					console.log(res)
					if(res.status==1){
						this.getOrderPage(this.params)
					}
				})
			},
			/*查询商品退换货记录*/ 
			getReturnGoods(params){
				getReturnGoods(params).then(res=>{
					console.log(res)
					if(!res){
						/*数据空白  新增退换货记录*/ 
						console.log("1")
						uni.navigateTo({
							url:'/pages/user/return_goods/return_goods?rec_id=' + this.recid+'&&delivery_id='+ this.delivery_id
						})
					}else{
						uni.navigateTo({
							url:'/pages/user/return_goods_info/return_goods_info?id=' + this.recid
						})
					}
				})
			},
			/*申请售后*/ 
			checkReturnGoodsStatus(e){
				var rec_id=e.currentTarget.dataset.recid;
				var delivery_id=e.currentTarget.dataset.delivery_id;
				this.recid=rec_id
				this.delivery_id=delivery_id
				this.getReturnGoods(rec_id)
			},
			onReachBottom(){//下拉加载数据
				
				if(this.goodsDateil.length===this.total){
					common.toast("none","加载完了",2000)
					 return false;
				}
				this.params.p++;
				if(this.hasLogin){
					this.getOrderPage(this.params)
				}
				
				
			},
		}
	}
</script>

<style lang="scss">
	.container {
		padding-top: 80rpx;
	}
	
	.type-navbar {
		white-space: nowrap;
		display: flex;
		width: 100%;
		height: 80rpx;
		background-color: #fff;
		position: fixed;
		z-index: 99;
		top: 0;
		left: 0;
	}
//#ifdef H5
	.type-navbar{
		top: 88rpx;
	}
	//#endif
	.type-box {
		width: 25%;
		box-sizing: border-box;
		font-size: 28rpx;
		line-height: 76rpx;
		padding: 0 20rpx;
		text-align: center;
		display: inline-block;
		overflow: hidden;
	}

	.type-navbar-item {
		position: relative;
		border-bottom: 4rpx solid #fff;
	}

	.type-item-on {
		/* border-bottom: 4rpx solid #ff3b3b; */
		color: #ff3b3b;
	}

	.type-item-on:after {
		content: '';
		position: absolute;
		width: 50rpx;
		height: 4rpx;
		border-radius: 2rpx;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
		background: #ff3b3b;
	}

	.goods-container {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		box-sizing: content-box;
		padding: 20rpx 0;
	}

	.goods-box {
		background-color: #fff;
		font-size: 28rpx;
		width: 710rpx;
		margin: 0 auto;
		border-radius: 10rpx;
		box-sizing: border-box;
		margin-bottom: 20rpx;
	}

	.goods-title {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 80rpx;
		border-bottom: 1rpx solid #f3f3f3;
		padding: 0 20rpx;
	}

	.store-logo {
		height: 30rpx;
		width: 30rpx;
		border-radius: 25%;
		margin-right: 10rpx;
		vertical-align: top;
		position: relative;
		top: 5rpx;
	}

	.store-name {
		color: #666;
		font-size: 28rpx;
	}

	.order-number {
		font-size: 24rpx;
		color: #666;
		margin: 30rpx 0;
		padding: 0 20rpx;
	}

	.pay-status {
		color: #F39818;
	}

	.goods-cont {
		padding: 20rpx 0;
		margin: 0 20rpx;
		display: flex;
		justify-content: space-between;
		position: relative;
		border-bottom: 1rpx solid #f3f3f3;
	}

	.cont-box .goods-cont:last-child {
		border: 0;
	}

	.img-box {
		width: 150rpx;
		height: 150rpx;
		border-radius: 5rpx;
	}

	.goods-mes {
		width: 500rpx;
	}

	.goods-mes .top {
		width: 100%;
		height: 90rpx;
		box-sizing: border-box;
	}

	.goods-mes .top .left {
		width: 330rpx;
		float: left;
		color: #666666;
		margin: 10rpx 0rpx;
		line-height: 40rpx;
		font-size: 24rpx;
		box-sizing: border-box;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}

	.goods-mes .top .right {
		width: 150rpx;
		float: right;
		margin: 10rpx 0rpx;
		color: #999999;
		font-size: 22rpx;
	}

	.goods-mes .top .right .price {
		height: 40rpx;
		line-height: 40rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		text-align: right;
	}

	.goods-mes .top .right .num {
		height: 40rpx;
		line-height: 40rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		text-align: right;
	}

	.goods-mes .bottom {
		color: #999999;
		height: 60rpx;
		line-height: 60rpx;
		font-size: 22rpx;
		white-space: nowrap;
		text-align: left;
		overflow: hidden;
		width: 100%;
		text-overflow: ellipsis;
	}

	.return-btn {
		color: #999999;
		position: absolute;
		right: 0;
		bottom: 0rpx;
		height: 80rpx;
		line-height: 80rpx;
	}

	.goods-tips {
		height: 48rpx;
		padding: 15rpx 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-top: 1rpx solid #f3f3f3;
	}

	.order-total {
		display: flex;
		justify-content: flex-start;
		font-size: 24rpx;
		color: #333;
	}

	.goods-total {
		margin-right: 20rpx;
		color: #ff3b3b;
	}

	.order-btn {
		width: 150rpx;
		height: 48rpx;
		line-height: 48rpx;
		text-align: center;
		margin-left: 20rpx;
		float: right;
		border-radius: 5rpx;
		background: #FF3B3B;
		color: #fff;
		font-size: 24rpx;
	}

	.order-btn-pay {
		color: #fff;
		background-color: #ff3b3b;
		border-color: #ff3b3b;
	}
	.cancel-btn{
	    width: 150rpx;
	    height: 48rpx;
	    line-height: 48rpx;
	    text-align: center;
	    margin-left: 20rpx;
	    float: right;
	    border-radius: 5rpx;
	    background: #fff;
	    color: #999999;
	    font-size: 24rpx;
	    border: 1rpx solid #E6E6E6;
	    box-sizing: border-box;
	}
	.countbox {
		width: 100%;
		height: 40rpx;
		line-height: 40rpx;
		text-align: right;
		padding: 0 20rpx;
		box-sizing: border-box;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		margin-bottom: 20rpx;
	}

	.countbox .all {
		font-size: 24rpx;
		color: #999999;
		margin-left: 15rpx;
	}

	.countbox .word {
		font-size: 24rpx;
		color: #666666;
		margin-left: 15rpx;
	}

	.countbox .money {
		color: #FF3B3B;
		font-size: 28rpx;
		margin-left: 15rpx;
		font-weight: 600;
	}
</style>
